import React, { useState } from 'react';
import './index.less';

import Touch from '@c//touch/Touch.tsx';

interface Props {
  path: string;
  className?: string;
  onClick: Function;
}
export default function BottomBar(props: Props) {
  const { path } = props;
  return (
    <div className={props.className + ' bottom-bar fx fx-jc-sa fx-ai-c'}>
      <div className={`item ${path === '/home/index' ? 'active' : ''}`} onClick={() => props.onClick('首页')}>
        首页
      </div>
      <div className={`item ${path === '/home/friend' ? 'active' : ''}`} onClick={() => props.onClick('朋友')}>
        朋友
      </div>

      <div className="item " onClick={() => props.onClick('拍视频')}>
        <span className="add-symbol">+</span>
      </div>

      <div className={`item ${path === '/home/message' ? 'active' : ''}`} onClick={() => props.onClick('消息')}>
        消息
      </div>
      <div className={`item ${path === '/home/me' ? 'active' : ''}`} onClick={() => props.onClick('我')}>
        我
      </div>
    </div>
  );
}
